import React from 'react';
import {Toast} from 'antd-mobile'
import { connect } from 'react-redux';

import { getEndStep, getManualEnd, postEmergencyCommit } from '../common/service'
import { saveData } from '../action/UserAction'
import NoPowerShow from '../component/NoPowerShow'

class ManualEnds extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			equipmentSure:[{id: 0,name: '锤子', num: 15},],
			textEquipment: [{value:{id:1,name:'锤子'},label:'锤子'}], //测试数据
			cantConstruction: false,   //是否无法施工
			constructionCarEdit: false,  //施工计划车辆编辑状态
			constructionPeopleEdit: false,  //施工计划人员编辑状态
			constructionPlanEdit: false, //施工计划编辑状态
			defaultPick: {id: '', name: '请选择设备'}, //选择设备的默认提示
			equipmentNum: '', //填写的设备数量
			flag: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.flowBaseInfo.status : 0,
			urgentText: '', //应急事件
		}
	}
	
	manualEnd() {
		const { showLoadModal, hideLoadModal } = this.props;
			showLoadModal();
			getManualEnd(this.props.userReducer.flowId) //流程id
			.then((data) => {
				const isOK = data.data;
				console.log(isOK);
				hideLoadModal();
				if (isOK.success) {
					this.props.dispatch(saveData(isOK.obj));
					this.props.currentPage(isOK.obj.flowBaseInfo.flowProcesses);
				} else {
					Toast.info(isOK.msg, 2);
				}
			})
			.catch((e) => {
				hideLoadModal();
				Toast.info('服务器异常', 2);
			})
	}
	
	emergencyCommit() {
		const { showLoadModal, hideLoadModal } = this.props;
		showLoadModal();
		if (this.state.urgentText.trim().length > 0) {
			postEmergencyCommit({
				event: this.state.urgentText.trim(),
				flowId: this.props.userReducer.flowId
			}) //流程id
			.then((data) => {
				const isOK = data.data;
				console.log(isOK);
				if (isOK.success) {
					this.manualEnd()
				} else {
					Toast.info(isOK.msg, 2);
				}
			})
			.catch((e) => {
				hideLoadModal();
				Toast.info('服务器异常', 2);
			})
		} else {
			this.manualEnd()
		}
	}

	getCurrentId(flowId) {
		const stepArr = this.props.userReducer.step.flowBaseInfo ? this.props.userReducer.step.flowBaseInfo.flowProcesses : [];
		let id = 0;
		for (const obj of stepArr) {
			if (obj.flowId === flowId) {
				id = obj.id;
				break;
			}
		}
		return id;
	}

	render() {
		//判断是不是当前节点
		if (this.props.currentObj.id < this.getCurrentId(14) || -1 === this.props.userReducer.roles.findIndex((value) => value === 70) ||
				this.state.flag !== 0 ||  this.props.currentObj.id >= this.getCurrentId(11)) {
			return (<NoPowerShow id={this.props.currentObj.flowId}></NoPowerShow>);
		}
		return (
			<div style={{padding: '1.42rem 0.2rem 0 0.2rem'}}>
				<p className='init-construction-title' style={{marginTop: '0.54rem'}} >应急事件</p>
				<textarea 
					className='init-coonstruction-address'
					style={{marginBottom: ''}}
				 	value={this.state.urgentText}
				  placeholder='请输入...'
				  onChange={(e)=>this.setState({urgentText: e.target.value})}>
				 </textarea>
				 <p style={{fontSize: 16,marginTop: '0.8rem',}}>如有异常，请手动结束施工</p>
				<div 
					id='CompeleteConstructionBtns'
					className='btnCommit'
					style={{marginBottom: '0.8rem',marginTop: '0.1rem'}}
					onTouchStart={()=>{document.getElementById('CompeleteConstructionBtns').style.backgroundColor = '#D97442'}}
					onTouchEnd={()=>{document.getElementById('CompeleteConstructionBtns').style.backgroundColor = '#FFA24A'}}
					onClick={()=>{
						this.emergencyCommit()
					}}
					>
					  应急操作，手动结束
				</div>
			</div>
		);
	}
}


function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(ManualEnds);
